<template>
  <view class="school-list-navbar" :style="{height: topBar.height+'px'}">
    <view class="top" :style="{paddingTop: topBar.statusBarHeight+'px'}">
      <view class="search-container flex-row">
        <image src="/static/search/sousuo.png" mode="widthFix" class="search-icon"></image>
        <input type="text" v-model="searchKWs" class="search-input" placeholder="搜索附近的驾校"
               placeholder-style="color:#7D7D7D;font-size:14px;"
               confirm-type="search"
               @confirm="toSearch"/>
        <view class="btn" @click="clear" v-if="searchKWs.length">
          <image src="/static/quxiao_input@3x.png" mode="widthFix" class="clear-icon"></image>
        </view>
      </view>
      <view class="btn" @click="toChooseLocation">
        <image src="/static/location.png" mode="widthFix" class="location-icon"></image>
      </view>
    </view>
  </view>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  name: "SchoolListNavBar",
  data() {
    return {
      searchKWs: ''
    }
  },
  computed: {
    ...mapGetters(['topBar', 'appName']),
  },
  methods: {
    toSearch() {
      this.$emit('search', this.searchKWs)
    },
    clear() {
      console.log('clear')
      this.searchKWs = ''
      this.$emit('search', this.searchKWs)
    },
    toChooseLocation() {
      uni.chooseLocation({
        success: (res) => {
          console.log('success', res);
          res.type = 'gcj02'
          this.$emit('locationChanged', res)
        },
        fail: (e) => {
          console.error(e)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.school-list-navbar {
  .top {
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10;
    overflow: hidden;
    height: 100rpx;
    display: flex;

    .search-container {
      border-radius: 21px;
      height: 70upx;
      background-color: rgba(241, 241, 241, 1);
      margin-left: 20rpx;
      margin-top: 15rpx;
      margin-right: 20rpx;
      font-size: 14px;
      justify-content: space-between;
      flex: 1;

      .search-input {
        color: #4B4F50;
        font-size: 28upx;
        flex: 1;
        align-self: center;
      }

      .search-icon {
        width: 32upx;
        height: 32upx;
        margin-left: 30upx;
        margin-right: 16upx;
        align-self: center;
      }

      .clear-icon {
        width: 32upx;
        height: 32upx;
        margin-right: 32upx;
        margin-left: 32rpx;
      }
    }
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;

    .location-icon {
      width: 48upx;
      height: 48upx;
      margin-right: 32upx;
    }
  }

  .placeholder {
    height: 70rpx;
  }
}
</style>
